<template>
	<!-- 20220928 -->
	<view class="mall-my-order-detail-page">
		<!-- 页面内容 -->
		<view class="page-content padding-bottom-safe-footer-20">
			<!-- 订单编号及状态 -->
			<view class="padding-top-30 padding-bottom-40 flex flex-direction align-center bg-main">
				<view class="flex text-36 text-ff">
					<text>{{detail.status_text}}</text>
					<view class="margin-left-30" v-if="detail.status == 1 && cancelSecond">
						{{cancelSecond}}后失效
					</view>
				</view>
				<view class="margin-top-20 flex align-center">
					<text class="tyIcon-list-1 text-28 text-ff"></text>
					<text class="margin-left-5 text-26 text-ff">{{detail.order_number}}</text>
				</view>
			</view>

			<!-- 收货地址 -->
			<view class="padding-lr-30 padding-top-25 padding-bottom-20 bg-ff">
				<view class="flex align-center">
					<text class="tyIcon-location-fill text-32 text-33" style="width: 32rpx;"></text>
					<view class="margin-left-10 line-height-40 text-30 text-bold text-33">
						<text>{{detail.linkman}}</text>
						<text class="margin-left-20">{{detail.mobile_phone}}</text>
					</view>
				</view>
				<view class="margin-top-5 text-26 text-aa" style="margin-left: 42rpx;">
					{{detail.province}}{{detail.city}}{{detail.area}}{{detail.address}}
				</view>
			</view>

			<!-- 订单内容 -->
			<view class="margin-top-20 bg-ff">
				<view class="padding-lr-30 border-bottom-ed">
					<jc-mall-orderProducts :list="detail.mallOrderProduct" :isCanGoDetail="true" :isShowRefund="true" :isCanRefund="detail.status == 2">
					</jc-mall-orderProducts>
					
					<!-- 订单信息 -->
					<view class="padding-bottom-20">
						<view class="line-height-60 flex align-center justify-between">
							<view class="text-28 text-33">商品总价</view>
							<view class="text-28 text-77">¥{{detail.total_price}}</view>
						</view>
						<view class="line-height-60 flex align-center justify-between">
							<view class="text-28 text-33">运费(快递)</view>
							<view class="text-28 text-77">
								{{detail.freight != 0 ? '¥'+detail.freight : '包邮 免邮费'}}
							</view>
						</view>
						<view class="line-height-60 flex align-center justify-between" v-if="detail.coupon_my_id != 0">
							<view class="text-28 text-33">优惠券</view>
							<view class="text-28 text-77">-¥{{detail.coupon_money}}</view>
						</view>
					</view>
				</view>

				<view class="padding-lr-30 line-height-100 flex align-center justify-between">
					<view class="text-28 text-bold text-33">实付款</view>
					<view class="text-price text-34 text-main">{{detail.pay_money}}</view>
				</view>
			</view>

			<!-- 订单信息 -->
			<view class="margin-top-20 padding-lr-30 padding-top-10 padding-bottom-20 bg-ff">
				<view class="height-60 flex align-center justify-between" v-if="detail.status != 1 && detail.pay_type_text">
					<view class="width-160 line-40 text-28 text-33">支付方式:</view>
					<view class="text-28 text-77">{{detail.pay_type_text}}</view>
				</view>
				<view class="flex text-24 text-80" v-if="detail.remark">
					<view class="width-160 line-height-60 line-40 text-28 text-33">订单备注:</view>
					<view class="flex-one padding-tb-10 line-40 text-right text-28 text-77">{{detail.remark}}</view>
				</view>
				<view class="height-60 flex align-center justify-between">
					<view class="width-160 line-40 text-28 text-33">下单时间:</view>
					<view class="text-28 text-77">{{detail.show_create_time}}</view>
				</view>
				<view class="height-60 flex align-center justify-between" v-if="detail.show_pay_time">
					<view class="width-160 line-40 text-28 text-33">付款时间:</view>
					<view class="text-28 text-77">{{detail.show_pay_time}}</view>
				</view>
				<view class="height-60 flex align-center justify-between" v-if="detail.show_express_time">
					<view class="width-160 line-40 text-28 text-33">发货时间:</view>
					<view class="text-28 text-77">{{detail.show_express_time}}</view>
				</view>
				<view class="height-60 flex align-center justify-between" v-if="detail.show_confirm_time">
					<view class="width-160 line-40 text-28 text-33">收货时间:</view>
					<view class="text-28 text-77">{{detail.show_confirm_time}}</view>
				</view>
				<view class="height-60 flex align-center justify-between" v-if="detail.show_cancel_time">
					<view class="width-160 line-40 text-28 text-33">取消时间:</view>
					<view class="text-28 text-77">{{detail.show_cancel_time}}</view>
				</view>
			</view>

			<!-- 底部 -->
			<view class="jc-footer-safe bg-ff">
				<view class="height-footer padding-lr-30 flex align-center justify-end">
					<jc-mall-myOrderBtn :status="detail.status" :order-id="detail.id"
						:pay-money="detail.pay_money"  :type="2" 
						:my-money="myMoney" :is-evaluate-add="detail.is_evaluate_add"
						@h5AliPay="h5AliPay">
					</jc-mall-myOrderBtn>
				</view>
			</view>
		</view>
		<!-- 支付 -->
		<view class="page-layer">
			<!-- 支付宝H5支付组件 -->
			<ty-function-h5-alipay :raw-html="rawHtml"></ty-function-h5-alipay>
		</view>
	</view>
</template>

<script>
	import mall from "../api/mall.js"
	import money from '@/pages/money/api/money.js'
	export default {
		data() {
			return {
				// 订单ID
				orderId: '',
				// 订单详情
				detail: {
					mallOrderProduct: []
				},
				// 自动取消订单倒计时
				cancelSecond: '',
				// 自动取消订单倒计时定时器
				cancelSecondIntervalTimer: '',
				// H5支付宝支付表单
				rawHtml: '',

				// 我的余额
				myMoney: 0
			}
		},

		onLoad(options) {
			// 订单ID
			this.orderId = options.id || ''
		},

		onShow() {
			// 加载订单信息
			this.loadData()
		},

		onReady() {
			// #ifdef H5
			if (this.cn.userAgent() == 'weixin') {
				// 兼容微信公众号支付路径，避免报错“当前URL未注册”
				this.cn.curUrlReload()
			}

			if (this.cn.userAgent() == 'h5') { //H5环境
				// H5微信支付时，已跳转H5微信支付页面
				if (uni.getStorageSync('hasOpenMwebUrl')) {
					uni.removeStorageSync('hasOpenMwebUrl')
					// 弹窗提示
					this.cn.confirm('请确认支付是否已完成', "已取消支付", "已完成支付").then(res => {
						uni.redirectTo({
							url: '/pages/integral/my/orderDetail?id=' + orderId
						})
					})
				}
			}
			// #endif

			// 获取我的余额
			money.getMyMoney().then(res => {
				if (res.code == 0) {
					this.myMoney = res.data.my.money
				}
			})
		},

		onUnload() {
			// 清除计时器
			clearInterval(this.cancelSecondIntervalTimer)
		},

		onHide() {
			// 清除计时器
			clearInterval(this.cancelSecondIntervalTimer)
		},

		methods: {
			/**
			 * 支付宝H5支付
			 * @date 2023-02-01
			 */
			h5AliPay(e) {
				this.rawHtml = e.rawHtml
			},

			/**
			 * 加载订单详情
			 * @date 2022-09-29
			 */
			loadData() {
				mall.order.getMyOrder(this.orderId).then(res => {
					if (res.code == 0) {
						// 订单详情
						this.detail = res.data.detail

						// 倒计时取消订单
						if (this.detail.cancel_rest_second > 0) {
							this.resetTime(this.detail.cancel_rest_second)
						}
					}
				})
			},

			/**
			 * 重置倒计时
			 * @param {int} second 倒计时秒数
			 * @date 2022-09-29
			 */
			resetTime(second) {
				this.cancelSecondIntervalTimer = setInterval(res => {
					if (second > 0) {
						let time = this.cn.timeSplit(second, 2)
						this.cancelSecond = time.minute + ":" + time.second
							--second
					} else {
						this.cancelSecond = '00:00'
						clearInterval(this.cancelSecondIntervalTimer)

						// 取消订单
						mall.order.cancelOrder(this.orderId).then(res => {
							if (res.code == 0) {
								this.cn.toast(res.msg)
								this.loadData()
							}
						})
					}
				}, 1000)
			},
		}
	}
</script>

<style scoped>
	.info_item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 50rpx;
		line-height: 50rpx;
		font-size: 24rpx;
		color: #808080;
	}

	.info_item2 {
		margin-top: 15rpx;
		display: flex;
		align-items: flex-start;
		font-size: 24rpx;
		color: #808080;
	}
</style>
